/* 预览的popup页面
 * Preview.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

class Preview extends Component{
	constructor(props){
		super(props);
	}

	componentDidMount(){
		//翻页按钮
		$(".arrow .up").bind("click",function(){
  			let $currIdx=parseInt($(".previewData").attr("currIdx"));
  			if($currIdx!=1){
  				$currIdx--;
  				let $previewData=$(".previewData li");
  				let $html=$($previewData[$currIdx-1]).html();
  				$(".islider-active").html($html);
  				$(".previewData").attr("currIdx",$currIdx);
  			}
		});
		$(".arrow .down").bind("click",function(){
  			let $currIdx=parseInt($(".previewData").attr("currIdx"));
  			let $previewData=$(".previewData li");
  			if($currIdx!=$previewData.length){
  				$currIdx++;
  				$previewData=$(".previewData li");
  				let $html=$($previewData[$currIdx-1]).html();
  				$(".islider-active").html($html);
  				$(".previewData").attr("currIdx",$currIdx);
  			}
		});
  	}

	render(){
		return(
			<div className="mid-content" style={{transform:'scale(0.75)'}}>
				<i className="close icon"></i>
				<div className="phone-container">
					<div id="previewPcHtml" className="phone" />
					<div className="arrow">
						<div className="up"></div>
						<div className="down"></div>
					</div>
				</div>
				<div className="right">
					<div className="qrcode-container">
						<div className="qrcode">
							<img id="preview_qrcode" style={{display:'block',margin:0,padding:0,transform:'scale(1.2)'}}/>
						</div>
					</div>
					<div className="text">手机扫一扫</div>
					<div className="text title"></div>
				</div>
			</div>
		);
	}
}

export default Preview;

